<template>
	<view class="">
		<u-navbar :background="{background: 'rgba(255,255,255, 0)'}" :immersive="true" :border-bottom="false"></u-navbar>
		<!-- 轮播图 -->
		<view  class="prism-player" >
			
			<u-swiper v-if="!showVideo" height="400" border-radius="0" :list="swiper"></u-swiper>
			<view  id="J_prismPlayer"  v-if="showVideo"></view>
		</view>
		<!-- 切换 -->
		<view class="u-flex u-row-around u-border-bottom">
			<view class="u-text-center" @click="switchTab(1)">
				<view class="text" style="line-height: 80rpx;">课程简介</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;" 
				:style="{background:activeTab == '1'?'#F53939':''}"
				></view>
			</view>
			<view class="u-text-center"  @click="switchTab(2)">
				<view class="text" style="line-height: 80rpx;">课程目录</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"
				:style="{background:activeTab == '2'?'#F53939':''}"
				></view>
			</view>
			<view class="u-text-center" @click="switchTab(3)">
				<view class="text" style="line-height: 80rpx;">课程评论</view>
				<view class="line" 
				style="width: 35%;height: 10rpx;border-radius: 10rpx;margin: 0 auto;"
				:style="{background:activeTab == '3'?'#F53939':''}"
				></view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="u-p-30" v-if="activeTab == '1'">
			<view class="title">【{{intorductionVo.lessonLable}}】{{intorductionVo.lessonName}}</view>
			<view class="u-flex u-m-t-8 u-row-between">
				<view class="star u-flex">
					<image v-for="item in 5" src="../../../static/home/star-full@2x.png" style="width: 18rpx;" mode="widthFix"></image>
					<text class="u-m-l-10 u-font-24">4.5</text>
				</view>
				<view class="view-like u-flex" style="color: #BFBFBF;">
					<view class="u-font-24">播放量：{{intorductionVo.broadcastNumber || 0}}</view>
					<view class="u-font-24">点赞：{{intorductionVo.supportNumber || 0}}</view>
				</view>
			</view>
			<view class="u-flex u-m-t-15 u-row-between" style="color: #262626;">
				<view class="u-font-24">课时：0.5h</view>
				<view class="u-font-24">课程时长：12.2h</view>
			</view>
			<view class="u-font-24 u-m-t-15" style="color: #BFBFBF;">讲师：{{intorductionVo.lecturer}}</view>
			<view class="u-font-24 u-m-t-15" style="color: #262626;line-height: 38rpx;">课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</view>
		</view>
		<!-- 课程评论 -->
		<view class="u-p-30"  v-if="activeTab == '3'">
			<view class="" style="position: relative;"  v-for="(item,idx) in commentList" :key="idx">
				<view class="u-flex u-m-b-15">
					<view class="avatar">
						<image style="width: 56rpx;" src="../../../static/class/menu/steward.png" mode="widthFix"></image>
					</view>
					<view class="u-flex-1 u-flex u-row-between u-p-l-20">
						<view class="">
							<view class="u-font-24" style="color: #262626;">{{item.userName}}</view>
							<view class="u-font-24" style="color: #595959;">{{item.commentTime}}</view>
						</view>
						<!-- reply -->
						<view class="u-flex">
							<image style="width: 36rpx;" src="../../../static/course/edit@2x.png" mode="widthFix"></image>
							<view class="u-m-l-8 u-font-24" style="color: #BFBFBF;" @click="reapply(item.commentId)">回复</view>
						</view>
					</view>
				</view>
				<view class="u-m-b-15">{{item.content}}</view>
				<view class="u-line-3" style="background: #F5F5F5;padding: 25rpx 40rpx;" v-for="(item2,idx2) in item.children" :key="idx2">
					<text class="" style="color: #262626;">{{item2.userName}}：</text>{{item2.content}}
				</view>
			</view>
		</view>
		<view class="u-flex u-row-center" v-if="activeTab == '3'">
			<navigator :url="`../review/review?id=${courseId}`" class="" style="padding: 15rpx 25rpx;border: 1rpx solid #030000;border-radius: 50rpx;">
				<text style="font-size: 28rpx;color: #262626;">查看全部评论</text>
			</navigator>
		</view>
		<!-- 课程章节目录 -->
		<view class="u-p-30" v-if="activeTab == '2'">
			<!-- 章节 -->
			<view class="" v-for="(item,idx) in chapterClassifyVoList" :key="idx">
				<!-- 标题 -->
				<view class="u-p-30 u-flex u-row-between">
					<view class="u-font-32" style="color: #262626;">{{item.chapterName}}</view>
					<view class="u-flex">
						<view class="u-font-28" style="color: #62DB01;" v-if="item.isDone == 1">已完成</view>
						<view class="u-m-l-10">
							<image style="width: 24rpx;" src="../../../static/arrow-up@2x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<!-- 目录 -->
				<view class="" style="padding: 0 30rpx 30rpx;">
					<view class="u-m-b-20 u-flex u-row-between" v-for="(item,idx) in 3" :key="idx" @click="lessonClick()">
						<view class="u-font-28" style="color: #262626;" >课节名称</view>
						<view class="u-font-28" style="color: #62DB01;">已完成</view>
					</view>
				</view>
				<view class="" style="background: #F5F5F5;height:20rpx"></view>
			</view>
		</view>
		<view class="" style="height: 120rpx;"></view>
		<!-- 点赞评价参加考试 -->
		<view class="" style="background: #FFFFFF;position: fixed;bottom: 0;left: 0;right: 0;z-index: 99;">
			<view class="u-p-25 u-flex u-row-between">
				<view class="u-flex">
					<image style="width: 44rpx;" src="../../../static/course/like-fill@2x.png" mode="widthFix"></image>
					<view class="u-font-24 u-m-l-10">199</view>
				</view>
				<view class="u-flex">
					<view class="u-font-26" style="border-radius: 25rpx;background: #FA541C;color: #FFFFFF;padding: 2rpx 15rpx;" @click="showCommentHandler()">评价课程</view>
					<view class="u-font-26 u-m-l-20" style="border-radius: 25rpx;background: #FA541C;color: #FFFFFF;padding: 2rpx 15rpx;">去考试</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showComment" mode="center" closeable width="600rpx" height="400rpx">
				<view style="padding: 30rpx;">
					<view>{{commentTitle}}</view>
					<view style="padding-left: 0rpx;">
						
						<u-field
									v-model="commentContent"
									label="评论内容:"
									placeholder="请输入评论"
								>
								</u-field>
					</view>
					
					<u-button shape="square" style="margin-top:60rpx" @click="submitComment()">提交</u-button>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseId:'',
				courseInfo:{},
				activeTab:'1',
				showVideo:false,
				yunUrl:'https://dr-mall-cdn.newlifegroup.com.cn/newdrmall/dr/',
				swiper: [
					{
						image: 'https://dummyimage.com/750.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},{
						image: 'https://dummyimage.com/750.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},{
						image: 'https://dummyimage.com/750.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},{
						image: 'https://dummyimage.com/750.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					}
				],
				chapterClassifyVoList:[],
				intorductionVo:{},
				commentList:[],
				commentType:'',
				commentContent:'',
				commentTitle:'',
				showComment:false,
				videoPlayer:null,
			}
		},
		onLoad(option) {
			console.log(option)
			
			this.courseId = option.id
			this.initCourseDetail()
			this.getCarouselCrList()
		},
		methods:{
			switchTab(data){
				this.activeTab = data
			},
			showCommentHandler(){
				this.showComment = true
				this.commentType=1;
				this.commentTitle= '课程评论'
			},
			reapply(data){
				this.showComment = true
				this.commentType=data;
				this.commentTitle= '回复评论'
			},
			lessonClick(){
				if(this.videoPlayer){
					this.videoPlayer= null
					this.showVideo=false
				}
				setTimeout(()=>{
					this.showVideo=true
					this.$util.request('app/classroom/v1/getVideoPlayAuth?videoId='+'4ef6f1f76a744457823ac1f2f49a004a','get',{},true).then(res=>{
						let playauth =res.data
						
						this.playVideo({playauth:playauth,vid:'4ef6f1f76a744457823ac1f2f49a004a'})
					})
				},200)
			},
			playVideo(data){
				this.videoPlayer = new Aliplayer({
					id: 'J_prismPlayer',
					width: '100%',
					autoplay: true,
					//播放方式二：推荐点播用户使用
					vid : data.vid,
					playauth : data.playauth,
					cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
					},function(player){
						console.log('播放器创建好了。',player)
				   });
				   
				   console.log(this.videoPlayer)
			},
			getCarouselCrList(){
				console.log(111111)
				
				this.$http.getCarouselCrList().then(res => {
					console.log(res)
					this.swiper = res.data.map(item =>{
						item.image = this.yunUrl+ item.imgUrl
						return item
					})
				}).catch(() => {
					console.log(22222)
				});
			},
			submitComment(){
				console.log(1)
				let obj = Object.assign({});
				if(this.commentType == 1){
					obj.lessonId= this.courseId
				}else{
					obj.commentId = this.commentType
				}
				obj.content = this.commentContent
				this.$util.request('app/classroom/v1/createComment','post',obj,false).then(res=>{
						console.log(res)
						this.commentContent = ''
						uni.showToast({
							title:'评论成功',
							icon:'none'
						})
						this.showComment = false
						this.initCourseDetail()
				})
			},
			initCourseDetail(){
				this.$util.request('app/classroom/v1/getLessonDetailInfoList','post',{lessonId:this.courseId},true).then(res=>{
					console.log(res)
					this.courseInfo = res.data
					this.chapterClassifyVoList= res.data.chapterClassifyVoList
					this.intorductionVo = res.data.intorductionVo
					this.commentList = res.data.commentList
				})
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
</style>
